<script setup>
import {Notification} from "@arco-design/web-vue";
import {ref} from 'vue'
import apiAll from "@/api/apiAll.js";

const emits = defineEmits(["success"]);
const visible = ref(false)
const form = ref({})
const loading = ref(false)

const handleOk = () => {
  loading.value = true
  apiAll.ipList.add(form.value).then(res => {
    Notification.success('添加成功')
    emits('success')
    form.value = {}
    visible.value = false;
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })

};
const handleCancel = () => {
  visible.value = false;
}
const show = () => {
  visible.value = true;
}
defineExpose({show});
</script>

<template>
  <a-drawer :width="660" :ok-loading="loading" :visible="visible" @ok="handleOk" @cancel="handleCancel"
            ok-text="保存提交" unmountOnClose>
    <template #title>
      添加黑白名单
    </template>
    <div class="flex-column">
      <a-form :model="form" :style="{ width: '600px' }">
        <a-form-item field="port" tooltip="服务端口" label="服务端口">
          <a-input-number v-model="form.port" placeholder="请输入服务端口"/>
        </a-form-item>
        <a-form-item field="type" label="白名单" tooltip="添加白名单后，只放行白名单，优先级高于黑名单">
          <a-textarea style="height: 250px;" v-model="form.white"
                      placeholder="请输入白名单，多个时分号、换行分隔。泛型仅支持 * , 例如 10.1.1.*、10.*.*.95"/>
        </a-form-item>
        <a-form-item field="password" label="黑名单">
          <a-textarea style="height: 250px" v-model="form.black"
                      placeholder="请输入黑名单，多个时分号、换行分隔。泛型仅支持 * , 例如 10.1.1.*、10.*.*.95"/>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped>

</style>